<template>
  <p>
    <input type="text" v-bind:value="name">
  </p>
  <p>
    <input type="text" v-model="name">
  </p>
  <p>
    <input type="text" v-bind:value="name" @input="name = $event.target.value">
  </p>

  <p>
    <input type="text" placeholder="trim" v-model.trim="name">
  </p>
  <p>
    <input type="text" placeholder="number" v-model.number="number">
  </p>
  <p>
    <input type="text" placeholder="lazy" v-model.lazy="name">
  </p>
  <p>
    <input type="text" placeholder="叠加" v-model.number.lazy="number">
  </p>

  <hr>

  <form action="/submit" method="post">
    <p>
      <label for="username">账号:</label><br>
      <input type="text" id="username" name="username" required v-model="form.username">
    </p>

    <p>
      <label>性别:</label><br>
      <input type="radio" id="male" name="gender" value="男" v-model="form.gender">
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="女" v-model="form.gender">
      <label for="female">女</label>
    </p>

    <p>
      <label>爱好:</label><br>
      <input type="checkbox" id="reading" name="hobby" value="阅读" v-model="form.hobby">
      <label for="reading">阅读</label>
      <input type="checkbox" id="sports" name="hobby" value="运动" v-model="form.hobby">
      <label for="sports">运动</label>
      <input type="checkbox" id="music" name="hobby" value="音乐" v-model="form.hobby">
      <label for="music">音乐</label>
    </p>

    <p>
      <label for="education">学历:</label><br>
      <select id="education" name="education" v-model="form.education">
        <option value="高中">高中</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
    </p>

    <p>
      <label for="skills">技能:</label><br>
      <select id="skills" name="skills" multiple v-model="form.skills">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
        <option value="Python">Python</option>
        <option value="Java">Java</option>
        <option value="SQL">SQL</option>
      </select>
    </p>

    <p>
      <label for="notes">备注:</label><br>
      <textarea id="notes" name="notes" rows="4" cols="50" v-model="form.notes"></textarea>
    </p>

    <p>
      <label for="birthday">生日:</label><br>
      <input type="date" id="birthday" name="birthday" required v-model="form.birthday">
    </p>

    <p>
      <input type="submit" value="提交">
    </p>
  </form>
  <hr>
  <p>{{ form }}</p>

<hr>

<p v-bind:class="{color:iscolor,size:issize}">Rias</p>
<p v-bind:class="Pcls">Rias</p>

<p v-bind:class="[{color:iscolor,size:issize},{'bg-color':isbgcolor}]">Rana</p>
<p class="Ra" v-bind:class="{color:iscolor}">Rana</p>
<p v-bind:class="['Ra',{color:iscolor}]"></p>

<RanaHello class="orange"></RanaHello>

<p v-bind:style="{color,'font-size':fontSize+'px'}">Rkuna</p>
<p v-bind:style="pStyle">Rkuna</p>
<p v-bind:style="[{color:'white', 'font-size': '30px'}, {'background-color': 'black'}]">Rkuna</p>

<h1>探索人工智能的未来</h1>
<button @click="fontSize -= 4" v-bind:disabled="fontSize <= 10">缩小</button>
<button @click="fontSize = 16">适中</button>
<button @click="fontSize += 4" v-bind:disabled="fontSize >= 50">放大</button>
<article v-bind:style="{fontSize: fontSize + 'px'}">
  <h2>人工智能的定义</h2>
  <p>人工智能（Artificial Intelligence，简称AI）是指通过计算机模拟人类智能的技术。它涵盖了机器学习、自然语言处理、计算机视觉等多个领域，旨在使机器能够执行复杂的任务。</p>

  <h2>人工智能的应用</h2>
  <p>人工智能已经广泛应用于各个行业。例如，在医疗领域，AI可以帮助医生诊断疾病；在金融领域，AI可以用于风险评估和交易预测；在交通领域，自动驾驶技术正逐渐成为现实。</p>

  <h2>人工智能的挑战</h2>
  <p>尽管人工智能带来了许多便利，但它也面临一些挑战。例如，数据隐私问题、算法偏见以及人工智能对就业市场的影响都是需要解决的难题。</p>

  <h2>人工智能的未来</h2>
  <p>未来，人工智能将继续快速发展。随着技术的进步，AI可能会在更多领域实现突破，例如教育、艺术和科学研究。同时，如何确保AI的伦理和安全使用也将成为重要的议题。</p>
</article>

<hr>

<p v-show="see">v-show</p>
<p v-if="see">v-if</p>
<p v-if="age > 18">你是成年人</p>
<p v-else>你不是成年人</p>

<p>
  <input type="number" v-model="cj" placeholder="请输入成绩">
</p>
<p v-if="cj<60">不及格</p>
<p v-else-if="cj>=60 && cj<70">及格</p>
<p v-else-if="cj>=70 && cj<80">良好</p>
<p v-else-if="cj>=80 && cj<90">优秀</p>
<p v-else>满分</p>

<template v-if="true">
  12345
</template>
<dl>
  <template v-if="faq==1">
    <dt>问题1</dt>
    <dd>答案1</dd>
  </template>
  <template v-if="faq==2">
    <dt>问题2</dt>
    <dd>答案2</dd>
  </template>
  <template v-if="faq==3">
    <dt>问题3</dt>
    <dd>答案3</dd>
  </template>
</dl>

<ul>
  <li v-for="item in fruit1" :key="item">
    {{ item }}
  </li>
</ul>
<ul>
  <li v-for="item in fruit2" :key="item.id">
    {{ item.id }} -{{ item.name }} - {{ '$'+item.price.toFixed(2) }}
  </li>
</ul>
<ul>
  <li v-for="{id,name,price}, index in fruit2" :key="id">
    {{ index }} - {{ id }} - {{ name }} - {{ '$'+price.toFixed(2) }}
  </li>
</ul>

<p v-for="(value, key, index) in detail" :key="key">
{{ index }} - {{ key }} - {{ value }}
</p>

<p>
  <span v-for="n in 10" v-bind:key="n" style="margin: 0 3px;">
    {{ n }}
  </span>
</p>
<p>
  <span v-for="n in 10" v-bind:key="n" style="margin: 0 3px">
    {{ 10 - n + 1 }}
  </span>
</p>

<p v-for="i in 9" v-bind:key="i">
<span v-for="j in i" v-bind:key="j" style="margin-right:20px">
{{ i }} * {{ j }} = {{ i * j }}
</span>
</p>

<hr>

<sg></sg>
<tab></tab>
</template>

<script>
import RanaHello from './components/RanaHello.vue';
import sg from './components/sg.vue';
import tab from './components/tab.vue';
export default {
  components:{
    RanaHello,
    sg,
    tab,
  },
  data() {
    return {
      name: 'AkiyamaMio',

      form: {
        username: '',
        gender: '',
        hobby: [],
        education: '',
        skills: [],
        notes: '',
        birthday: '',
      },

      iscolor: false,
      issize: false,
      Pcls: {
        color: false,
        size: false
      },

      color: 'red',
      fontSize:16,
      pStyle: {
        color: 'green',
        'font-size': '50px'
      },

      see: false,
      age:20,
      cj: 0,

      faq: 1,

      fruit1:['苹果','香蕉','橘子'],
      
      fruit2:[
        {id:1,name:'苹果',price:5},
        {id:2,name:'香蕉',price:3},
        {id:3,name:'橘子',price:4},
      ],
      detail: {
        name: '苹果',
        price: 5,
        count: 10
      }
    }
  },

watch: {
  name(newVal) {
    console.log(newVal)
  }
}
}

// methods: {
// }
</script>
<style>
.color {
  color: cornflowerblue;
}
.size {
  font-size: 20px;
}
.bg-color {
  background-color: yellow;
}

</style>